<template>
	<view>
		<dcp-scroller :isLoading="isLoading" @refresh="refresh">
		<view  class="page_height_box">
		<view v-if="info==null">
			<zero-loading type="triangle"></zero-loading>
		</view>
		<view v-if="info!=null">
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="page_item_bj"></view>
		<view class="page_content_box">
			<view :style="{height:statusHeight+'px'}"></view>
			<view class="balanceBox">
				<view class="balance">
					<view class="h1">
						<text>账户余额</text>
						<image v-if="isShowAvailable" src="../../static/images/icon38.png" @click="isShowAvailable = false"></image>
						<image v-else src="../../static/images/icon38h.png" @click="isShowAvailable = true"></image>
					</view>
					<view class="h2">
						<view class="fl" v-if="isShowAvailable">
							<text>{{info.available | unitConverter}}</text>元
						</view>
						<view class="fl" v-else>
							<text>****</text>元
						</view>
						<view class="fr" @click="goWithdrawalNew()">提现</view>
					</view>
				</view>
			</view>
			<view class="navBox">
				<view class="nav">
					<view class="li" @click="goWithdrawal()">
						<image src="../../static/images/icon39.png"></image>
						<text>提现记录</text>
					</view>
					<view class="li" @click="goBond()">
						<image src="../../static/images/icon40.png"></image>
						<text>保证金</text>
					</view>
					<view class="li" @click="idCardDetail()">
						<image src="../../static/images/icon41.png"></image>
						<text>实名认证</text>
					</view>
					<view class="li" @click="collInfo()">
						<image src="../../static/images/icon42.png"></image>
						<text>收款信息</text>
					</view>
				</view>
			</view>
			<view class="tabBox">
				<view class="tab">
					<view class="li" :class="select_index == 0 ? 'active' : ''" @click="handleSelect(0)">今日账单</view>
					<view class="li" :class="select_index == 1 ? 'active' : ''" @click="handleSelect(1)">历史账单</view>
				</view>
			</view>
			<view class="main">
				<view class="word">
					<text>收入¥{{info.add | unitConverter}}0</text>
					<text>支出¥{{info.sub | unitConverter}}</text>
				</view>
				<view class="list">
					<view class="li" v-for="(data,index) in list" :key="index">
						<view class="fl">
							<view class="h1">{{data.titile}}</view>
							<view class="h2">{{data.content}}</view>
							<view class="h3">
								<image src="../../static/images/icon43.png"></image>
								<text>{{data.created_at?data.created_at:'--'}}</text>
							</view>
						</view>
						<view class="fr">
							<view class="h1">
								<image src="../../static/images/icon44.png" v-if="data.addsub=='add'"></image>
								<image src="../../static/images/icon45.png" v-if="data.addsub=='sub'"></image>
								<text>金额</text>
							</view>
							<view class="h2 red" v-if="data.addsub=='add'">+￥{{data.number}}</view>
							<view class="h2" v-if="data.addsub=='sub'">-￥{{data.number}}</view>
						</view>
					</view>
					<view class="page_tip" v-if="list.length>0">我是有底线的~</view>
					<view class="null_box" v-if="list.length==0" style="padding-top: 80rpx;" >
						<image src="../../static/images/png04.png" mode="" mode="widthFix"></image>
						<view class="null_tip">这里空空如也~</view>
					</view>
<!--					<view  style="height:180rpx;"></view>-->
				</view>
			</view>
			<!--<view class="wallet_top_box" v-if="info!=null">
				<view class="wallet_top_content_box">
					<view class="wallet_top_content_item">
						<view class="wallet_top_content_item_name">今日收入/元</view>
						<view class="wallet_top_content_item_num">{{info.today | unitConverter}}</view>
					</view>
					<view class="wallet_top_content_item">
						<view class="wallet_top_content_item_name">总收入/元</view>
						<view class="wallet_top_content_item_num">{{info.all | unitConverter}}</view>
					</view>
					<view class="wallet_top_content_item" @click="goWithdrawalNew()">
						<view class="wallet_top_content_item_name">账户余额/元</view>
						<view class="wallet_top_content_item_num">{{info.available | unitConverter}}</view>
					</view>
				</view>
				<view class="wallet_top_bottom_box" @click="goBond()">
					<view class="wallet_top_bottom_box_left">
						保证金：<text style="margin-right: 6rpx;">{{info.deposit | unitConverter}}</text>元
					</view>
					<view class="wallet_top_bottom_box_right" >
					 <text v-if="info.deposit < info.deposit_reminder">保证金不足，请及时缴纳</text>	<image src="https://www.cccshansong.com/chong_weapp/wallet_icon1.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>-->
			<!--<view class="wallet_select_box">
				<view class="wallet_select_item" :class="select_index==0?'wallet_select_item_active':''" @click="handleSelect(0)">
					今日账单  <view class="wallet_select_item_heng" v-show="select_index==0"></view>
				</view>
				<view class="wallet_select_item" :class="select_index==1?'wallet_select_item_active':''" @click="handleSelect(1)">
					历史账单  <view class="wallet_select_item_heng" v-show="select_index==1"></view>
				</view>
			</view>
			<view class="wallet_select_small_box">
				<view class="wallet_select_small_left" v-if="info!=null">
					收入 ¥{{info.add | unitConverter}}  <text>支出 ¥{{info.sub | unitConverter}} </text>
				</view>
				<view class="pick_box" v-if="select_index==0" style="opacity: 0;"></view>
				<view class="pick_box" v-if="select_index==1">
					 <picker mode="date" @change="bindDateChange" :value="date" :start="startDate" :end="endDate">
					    <view class="pick_input pick_input1"  v-if="date==null">请选择日期</view>
						<view class="pick_input" v-if="date!=null">{{date.slice(5,10)}}</view>
					 </picker>
					 <view class="pick_img">
						<image src="https://www.cccshansong.com/chong_weapp/auth_bottom.png" mode=""></image>
					 </view>
				</view>
			</view>-->
			<!--<view class="wallet_content_box">
				<view class="wallet_content_item_box" v-for="(data,index) in list" :key="index">
					<view class="wallet_content_item_left_box">
						<view class="wallet_content_item_name">{{data.titile}}</view>
						<view class="wallet_content_item_desc">{{data.content}}</view>
						<view class="wallet_content_item_time">{{data.created_at?data.created_at:'&#45;&#45;'}}</view>
					</view>
					<view class="wallet_content_item_right_box">
						<view class="wallet_content_item_right_name">金额</view>
						<view class="wallet_content_item_right_price" v-if="data.addsub=='add'">¥{{data.number}}</view>
						<view class="wallet_content_item_right_price" v-if="data.addsub=='sub'">-¥{{data.number}}</view>
					</view>
				</view>
				<view class="page_tip" v-if="list.length>0">我是有底线的~</view>
				<view class="null_box" v-if="list.length==0" style="padding-top: 80rpx;" >
					<image src="../../static/images/png04.png" mode="" mode="widthFix"></image>
					<view class="null_tip">这里空空如也~</view>
				</view>
				<view  style="height:180rpx;"></view>
			</view>-->
		</view>
	</view>
	<!--<view class="footer">
		<view hover-class="hover_class" @click="goWithdrawal()" class="creatbutton">
			提现记录
		</view>
	</view>-->
	</view>
	</dcp-scroller>
	</view>
</template>

<script>
	import zeroLoading from "@/components/zero-loading/components/zero-loading/zero-loading.vue"
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		components: {
			navigationCustom,
			zeroLoading
		},
		data() {
			return {
				isLoading:false,
				add:0,
				sub:0,
				count:0,
				list:[],
				page:1,
				date1:null,
				date: null,
				select_time:'',
				select_index:0,
				select_btn_status:true,
				info: null,
				statusHeight: 0,
				config: {
					title: "我的钱包", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#fff", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back2.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},

				isShowAvailable:true
			};
		},
		onLoad() {
			var a = this
			a.statusHeight = uni.getSystemInfoSync().statusBarHeight  + 40

		},
		onShow() {
			var a = this
			a.date = a.getDate('end');
			a.date1 = a.getDate('end');
			a.select_time = a.date1
			a.list = []
			a.page = 1
			a.getList()
		},
		computed: {
		    startDate() {
		        return this.getDate('start');
		    },
		    endDate() {
		        return this.getDate('end');
		    }
		},
		onPageScroll(res) {
			var a = this
			if (0 < res.scrollTop <= 60) {
				a.config.bgcolor = 'rgba(65, 138, 255,0)'
			}
			if (40 < res.scrollTop <= 120) {
				a.config.bgcolor = 'rgba(65, 138, 255,0.2)'
			}
			if (60 < res.scrollTop <= 220) {
				a.config.bgcolor = 'rgba(65, 138, 255,0.4 )'
			}
			if (res.scrollTop > 220) {
				a.config.bgcolor = 'rgba(65, 138, 255,1)'
			}
			if (res.scrollTop == 0) {
				a.config.bgcolor = 'rgba(65, 138, 255,0)'
			}
		},
		onPullDownRefresh(){
			var a = this
			a.list = []
			a.page = 1
			a.getList()
		},
		onReachBottom(){
			var a = this
			console.log('触底了')
			if(a.count >a.list.length){
				console.log(a.list.length)
				a.page++;
				a.getList()
			}
		},
		methods: {
			refresh(){
				var a = this
				a.isLoading = true;
				setTimeout(()=>{
					a.list = []
					a.page = 1
					a.getList()
				},200)
			},
			goWithdrawalNew(){
				uni.navigateTo({
					url:'/pages/user/withdrawal'
				})
			},
			goWithdrawal(){
				uni.navigateTo({
					url:'/pages/user/withdrawalList'
				})
			},
			getList() {
				var a = this
				uni.showLoading({
					title:'加载中'
				})
				a.globalajax('wallet/list', {
					page:a.page,
					per_page:10,
					start:a.select_time
				}, 'GET', function(res) {
					console.log(res);
					uni.hideLoading()
					uni.stopPullDownRefresh()
					a.isLoading = false
					setTimeout(()=>{
						a.select_btn_status = true
					},1500)
					if (res.data.code == 200) {
						a.list = a.list.concat(res.data.data.list.list)
						a.count = res.data.data.list.total
						var temp_obj = res.data.data
						temp_obj.deposit = res.data.data.deposit*1
						temp_obj.deposit_reminder = res.data.data.deposit_reminder*1
						a.info = temp_obj
					} else {
						a.$showModal({
							title:'友情提示',
							content:res.data.msg,
							showCancel:false,
							confirmText:'我知道了',
							success: (res) => {
							}
						});
					}
				});
			},
			idCardDetail(){
				uni.navigateTo({
					url:'/pages/user/idCardDetail'
				})
			},
			collInfo(){
				uni.navigateTo({
					url:'/pages/user/collInfo'
				})
			},
			goBond(){
				uni.navigateTo({
					url:'/pages/user/userBond'
				})
			},
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleSelect(index){
				var a = this
				if(a.select_btn_status){
					if(index==0){
						a.select_time = a.date1
					}else{
						a.select_time = a.date
					}
					a.select_btn_status = false
					a.select_index = index
					a.list = []
					a.page = 1
					a.getList()
				}
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();

			    if (type === 'start') {
			        year = year - 100;
			    } else if (type === 'end') {
			        year = year;
			    }
			    month = month > 9 ? month : '0' + month;;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
			    this.date = e.detail.value
				var a = this
				a.select_time = a.date
				a.list = []
				a.page = 1
				a.getList()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f8;
	}
	.footer {
		width: 100%;
		padding-top: 12rpx;
		padding-bottom: 12rpx;
		padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		position: fixed;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		border-top: 2rpx solid #EBEEF5;

		.creatbutton {
			background-color: rgba(255, 107, 0, 1);
			text-align: center;
			line-height: 80rpx;
			margin: 0 auto;
			width:688rpx;
			height: 80rpx;
			border-radius: 16rpx;
			color:#fff;
			font-size: 30rpx;
			border-radius: 12rpx;
			position: relative;
			.shareBtn{
				position: absolute;
				top: 0;
				left: 0;
				width:688rpx;
				height: 80rpx;
				opacity: 0;
			}
		}
	}
	.top_nav_box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.page_item_bj {
		width: 750rpx;
		height: 664rpx;
		background-image: url('../../static/images/png03.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.page_content_box {
		width: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		.wallet_content_box{
			// padding-top: 20rpx;
			.wallet_content_item_box{
				width: 702rpx;
				height: 168rpx;
				background-color: #fff;
				margin: 0 auto;
				margin-bottom: 20rpx;
				border-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				.wallet_content_item_left_box{
					margin-left: 24rpx;
					.wallet_content_item_name{
						color: rgba(48, 49, 51, 1);
						font-size: 28rpx;
						font-weight: bold;
						padding-top: 24rpx;
						padding-bottom: 8rpx;
						width: 480rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						 word-break: break-all;
					}
					.wallet_content_item_desc{
						color: rgba(144, 147, 153, 1);
						font-size: 24rpx;
						padding-top: 6rpx;
						width: 480rpx;
						white-space: nowrap;
					    text-overflow: ellipsis;
					    overflow: hidden;
					    word-break: break-all;
					}
					.wallet_content_item_time{
						color: rgba(144, 147, 153, 1);
						font-size: 24rpx;
						padding-top: 6rpx;
					}
				}
				.wallet_content_item_right_box{
					margin-right: 24rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					.wallet_content_item_right_name{
						color: rgba(48, 49, 51, 1);
						font-size: 24rpx;
						padding-top: 44rpx;
					}
					.wallet_content_item_right_price{
						color: rgba(255, 107, 0, 1);
						font-size: 32rpx;
						font-weight: bold;
						padding-top: 6rpx;
					}
				}
			}
		}
		.wallet_select_small_box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 30rpx;
			padding-bottom: 20rpx;
			.wallet_select_small_left{
				margin-left: 24rpx;
				color: rgba(36, 40, 49, 1);
				font-size: 26rpx;
				text{
					 margin-left: 48rpx;
				}
			}
			.pick_box{
				margin-right: 32rpx;
				position: relative;
				font-size: 28rpx;
				width:184rpx;
				height:56rpx;
				border-radius: 16rpx;
				background-color: #fff;
				border: 2rpx solid rgba(228, 231, 237, 1);
				.pick_img{
					width: 56rpx;
					height: 56rpx;
					margin-left:132rpx;
					image{
						width: 44rpx;
						height: 44rpx;
						margin-top:8rpx;
					}
				}
				picker{
					z-index: 9;
					position: absolute;
					top: 0;
					left: 0;
					width:184rpx;
					height:56rpx;
					.pick_input{
						height: 56rpx;
						line-height: 56rpx;
						text-align: left;
						font-size: 28rpx;
						padding-left: 42rpx;
					}
					.pick_input1{
						font-size: 28rpx;
						color: #808080;
					}
				}
			}
		}
		.wallet_select_box{
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			.wallet_select_item{
				width: 50%;
				height: 108rpx;
				text-align: center;
				line-height: 108rpx;
				position: relative;
				color: rgba(96, 98, 102, 1);
				font-size: 32rpx;
				font-weight: bold;
				.wallet_select_item_heng{
					position: absolute;
					bottom: 0;
					left: 41%;
					width: 64rpx;
					height: 6rpx;
					border-radius: 30rpx;
					background-color: rgba(255, 107, 0, 1);
				}
			}
			.wallet_select_item_active{
				color: rgba(36, 40, 49, 1);
			}
		}
		.balanceBox{
			padding: 0 32rpx;
			margin-top: 48rpx;
			.balance{
				background: rgba(255,255,255,0.6);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 32rpx;
				.h1{
					display: flex;
					align-items: center;
					text{
						font-size: 32rpx;
						color: #418AFF;
					}
					image{
						width: 44rpx;
						height: 44rpx;
						margin-left: 32rpx;
					}
				}
				.h2{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.fl{
						font-size: 24rpx;
						color: #666;
						text{
							font-size: 48rpx;
							color: #418AFF;
							margin-right: 15rpx;
							display: inline-block;
							font-weight: bold;
						}
					}
					.fr{
						background: #418AFF;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						width: 180rpx;
						height: 58rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 58rpx;
					}
				}
			}
		}
		.navBox{
			padding: 0 32rpx;
			margin-top: 32rpx;
			.nav{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				.li{
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					image{
						width: 64rpx;
						height: 64rpx;
					}
					text{
						font-size: 20rpx;
						color: #333;
						margin-top: 8rpx;
					}
				}
			}
		}
		.tabBox{
			padding: 0 32rpx;
			margin-top: 32rpx;
			.tab{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.li{
					width: 319rpx;
					height: 72rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 2rpx solid #666666;
					text-align: center;
					line-height: 72rpx;
					font-size: 32rpx;
					color: #666;
					&.active{
						background: #418AFF;
						border: 2rpx solid #418AFF;
						color: #fff;
					}
				}
			}
		}
		.main{
			padding: 0 32rpx;
			margin-top: 24rpx;
			.word{
				text{
					font-size: 24rpx;
					color: #333;
					margin-right: 48rpx;
				}
			}
			.list{
				.li{
					display: flex;
					align-items: center;
					justify-content: space-between;
					background: #fff;
					border-radius: 24rpx;
					padding: 24rpx;
					margin-top: 32rpx;
					.fl{
						.h1{
							font-size: 30rpx;
							color: #333;
						}
						.h2{
							font-size: 24rpx;
							color: #666;
							margin-top: 8rpx;
						}
						.h3{
							display: flex;
							align-items: center;
							margin-top: 8rpx;
							image{
								width: 34rpx;
								height: 34rpx;
							}
							text{
								font-size: 24rpx;
								color: #666;
								margin-left: 8rpx;
							}
						}
					}
					.fr{
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						.h1{
							display: flex;
							align-items: center;
							image{
								width: 34rpx;
								height: 34rpx;
							}
							text{
								font-size: 24rpx;
								color: #666;
								margin-left: 8rpx;
							}
						}
						.h2{
							font-size: 36rpx;
							color: #418AFF;
							margin-top: 8rpx;
							&.red{
								color: #FF3C26;
							}
						}
					}
				}
			}
		}
		.wallet_top_box{
			width: 702rpx;
			height: 260rpx;
			background-image: url('https://www.cccshansong.com/chong_weapp/wallet_bj_new.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			margin: 0 auto;
			margin-top: 20rpx;
			.wallet_top_bottom_box{
				width: 670rpx;
				height: 76rpx;
				margin: 0 auto;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: rgba(0, 0, 0, 0.03);
				border-radius: 16rpx;
				.wallet_top_bottom_box_left{
					margin-left: 18rpx;
					color: rgba(48, 49, 51, 1);
					font-size: 24rpx;
					text{
						font-weight: bold;
						font-size: 36rpx;
					}
				}
				.wallet_top_bottom_box_right{
					display: flex;
					align-items: center;
					color: rgba(255, 107, 0, 1);
					font-size: 24rpx;
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.wallet_top_content_box{
				display: flex;
				align-items: center;
				.wallet_top_content_item{
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					width: 33.3%;
					.wallet_top_content_item_name{
						color: rgba(48, 49, 51, 1);
						font-size: 26rpx;
						padding-top: 32rpx;
						padding-bottom: 4rpx;
					}
					.wallet_top_content_item_num{
						color: #FF6B00;
						font-size: 52rpx;
						font-weight: bold;
					}
				}
			}

		}
	}
</style>
